<template>
    <div class="userMain">
        <div class="seachDiv">
            <el-form :model="searchForm" inline ref="searchdataForm">
                <el-form-item label="职业" prop="occupation">
                    <el-select v-model="searchForm.occupation">
                        <el-option label="主持人" value="0"></el-option>
                        <el-option label="督导" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否工作室成员" prop="is_internal">
                    <el-select v-model="searchForm.is_internal">
                        <el-option label="是" value="0"></el-option>
                        <el-option label="否" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="兼职/全职" prop="occupation_type">
                    <el-select v-model="searchForm.occupation_type">
                        <el-option label="全职" value="0"></el-option>
                        <el-option label="兼职" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="艺名" prop="stage_name">
                    <el-input type="text" v-model="searchForm.stage_name"></el-input>
                </el-form-item>
                <el-button plain class="rest" type="primary" @click="restForm">重置</el-button>
                <el-button class="search" type="primary" @click="queryForm">查询</el-button>
            </el-form>
        </div>
        <div class="tabelDiv">
            <el-button class="add" type="primary" @click="addUser">新增</el-button>
            <div style="width: 100%;flex: 1;overflow-y: auto;">
                <el-table :data="tableData" :height="tableHeight" style="width: 100%;">
                    <el-table-column label="序号" width="50" align="center" type="index">
                    </el-table-column>
                    <el-table-column prop="stage_name" label="艺名" align="center">
                        <template slot-scope="scope">
                            <div class="over-hidden openDetails" style="color: #409eff; cursor: pointer"
                                @click="editUser(scope.row.id, 'isdetail')">
                                {{ scope.row.stage_name }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="occupation" label="职业" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.occupation == 0 ? '主持人' : scope.row.occupation == 1? '督导' : '管理员' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="market_price" label="市场价" align="center">
                    </el-table-column>
                    <el-table-column prop="collaboration_price" label="合作价" align="center">
                    </el-table-column>
                    <el-table-column prop="is_internal" label="工作室成员" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.is_internal == 0 ? '是' : scope.row.phone!='admin'?'否':'' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="occupation_type" label="全职/兼职" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.occupation_type == 0 ? '全职' : scope.row.phone!='admin'?'兼职':'' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="year_indicator" label="年度指标" align="center">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" v-if="scope.row.phone!='admin'" @click="editUser(scope.row.id, 'isedit')">编辑</el-button>
                            <el-button type="text" v-if="scope.row.phone!='admin'" style="color: #F56C6C;" @click="delUser(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="page" @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="10" layout="total, prev, pager, next" :total="pageTotal">
            </el-pagination>
        </div>
        <userAdd ref="userDetail"></userAdd>
    </div>
</template>
<script>
import userAdd from './addUser.vue'
export default {
    components: {
        userAdd
    },
    data() {
        return {
            tableHeight: '100%',
            searchForm: {
                occupation: '',
                is_internal: '',
                occupation_type: '',
                stage_name: '',
            },
            tableData: [],
            pageTotal: 100,
            currentPage: 1,
        }
    },
    methods: {
        queryForm() {
            let serch = { ...this.searchForm, size: 10, page: this.currentPage }
            this.$api.queryUserList(serch).then(res => {
                this.tableData = res.data
                this.pageTotal = res.total
            }).catch(error => {
                this.$message.error(error.message)
            })
        },
        restForm() {
            this.$refs.searchdataForm.resetFields()
            this.currentPage = 1
            this.queryForm()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.queryForm()
        },
        addUser() {
            this.$refs.userDetail.adduser()
        },
        editUser(id, item) {
            this.$refs.userDetail.getUserDetail(id, item)
        },
        delUser(id) {
            this.$confirm('此操作将删除该信息, 是否继续删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                confirmButtonClass: 'btnConfirm',
                cancelButtonClass: 'btnCancel',
                type: 'warning'
            }).then(() => {
                this.$api.deleteUser(id).then(res => {
                    this.$message.success('删除成功')
                    this.queryForm()
                }).catch(error => {
                    this.$message.error(error.message)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })

        }
    },
    mounted() {
        this.queryForm()
    }
}
</script>
<style lang="less" scoped>
.userMain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .seachDiv {
        width: calc(100% - 40px);
        height: 100px;
        // height: 110px;
        background: #fff;
        border-radius: 20px;
        padding: 20px;
        flex-shrink: 0;

    }

    .tabelDiv {
        width: calc(100% - 40px);
        background-color: #fff;
        border-radius: 20px;
        margin-top: 20px;
        padding: 20px 20px 0px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex: 1;
        overflow: hidden; 

        .add {
            margin-bottom: 15px;
        }

        .page {
            margin-top: 5px;
        }
    }

}
</style>
<style>
.el-table__header th{
    background: #f5f7fa !important;
}
</style>
